/*
 * 1. animation > slide 테스트
*/
Ext.setup({
	tabletStartupScreen: "./tabletStartupScreen.png",
	phoneStartupScreen: "./phoneStartupScreen.png",
	tabletIcon: "./tabletIcon.png",
	phoneIcon: "./phoneIcon.png",
	glossOnIcon: true,
	statusBarStyle: "black",
	fullscreen: true,
	preloadImages: [],
	scope: this,
	onReady: function() {
		var panel = new Ext.Panel({
			fullscreen:true,           
			layout:"card",
			dockedItems: [ {
				xtype: 'toolbar',
				dock : 'top',
				ui: 'light',
				title: 'Animation > Slide Test',
			}, {
				xtype: 'toolbar',
				dock: 'top',
				ui: 'light',
				defaults: {
					handler:function(btn, e) {
						panel.setActiveItem(Number(btn.value), {
							type:"flip",	//slide, pop, fade, flip, cube
							direction:btn.text,
							duration:2000,
							easing:"elasticIn",
//							cover:true, 
							reveal:true
						});
					}
				},
				items: [{
					text: "up",
					value:0
				}, {
					text: "down",
					value:1
				}, {
					text: "left",
					value:2
				}, {
					text: "right",
					value:3
				}]
			} ],
			defaults:{ },
			items: [ {
				title: 'Carad 1',
				html : '1',
				cls  : 'card card1'
			}, {
				title: 'Card 2',
				html : '2',
				cls  : 'card card2'
			}, {
				title: 'Card 3',
				html : '3',
				cls  : 'card card3'
			}, {
				title: 'Card 4',
				html : '4',
				cls  : 'card card4'
			} ]
		});
	}
});